<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>
    <script src="static/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        body {
            background-color: #F2F6F9;
        }

        .titles {
            width: 100%;
        }

        .title1 {
            width: 169px;
            height: 172px;
            margin: 46px auto 0;
        }

        .title1 img {
            width: 169px;
            height: 172px;
        }

        .title2 {
            margin: 7px auto 0;
            color: rgba(16, 16, 16, 1);
            font-size: 36px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }

        .title3 {
            width: 865px;
            margin: 15px auto 0;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }
        .content {
            margin: 50px auto 0;
            width: 1000px;
            background-color: #FFFFFF;
            font-size: 14px;
            box-shadow: 0px 0px 5px 0px rgba(170, 170, 170, 1);
            font-family: Roboto;
        }
        .div {
            width: 100%;
            height: 1px;
        }

        .ctop {
            width: 900px;
            height: 5px;
            background-color: #F2F6F9;
            margin: 24px auto 0;
        }
        .content1{
            width: 900px;
            margin: 30px auto 0;
            border-bottom: 1px solid rgb(223, 223, 223);
        }
        .sp1{
            width: 30px;
            height: 30px;
            color: white;
            line-height: 30px;
            text-align: center;
            display: inline-block;
            background-color: #2b75f2;
            margin-left: 10px;
            border-radius: 50%;
        }
        .sp2{
            height: 30px;
            line-height: 30px;
            color: #FF101010;
            font-size: 18px;
            margin:0 0 10px 10px;
            color: rgba(16, 16, 16, 1);
            font-family: SourceHanSansSC-regular;
        }
        .c1{
            height: 30px;
            margin: 0 0 10px 50px;
            display: flex;
        }
        .labels{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #FFDFDFDF;
        }
        .labelsc {
            background-color: rgba(43, 117, 242, 1);
            background-image: url("imgs/勾.png");
            background-size: cover;
        }
        .inp{
            width: 30px;
            height: 30px;
            opacity: 0;
        }
        .c1 div{
            height: 30px;
            line-height: 30px;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            margin-left: 5px;
            font-family: SourceHanSansSC-regular;
        }
        .cbottom{
            width: 280px;
            height: 50px;
            margin: 30px auto;
            line-height: 50px;
            border-radius: 4px;
            background-color: rgba(43, 117, 242, 1);
            color:white;
            font-size: 20px;
            text-align: center;
            font-family: Roboto;
        }
        .dd{
            width: 100%;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="titles">
        <div class="title1">
            <img src="imgs/调查报告.gif">
        </div>
        <div class="title2">
            民主测评投票
        </div>
        <div class="title3">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </div>
    <div class="content">
        <div class="div"></div>
        <div class="ctop"></div>
        <div class="content1" v-for="(item,index) in list">
            <span class="sp1">{{item.num}}</span><span class="sp2">{{item.name}}</span>
            <div class="c1" v-for="(item1,index1) in item.list1">
                <label class="labels" :class="{labelsc:item1.select}"
                       @click="selects(index,index1)">
                    <input class="inp" :type="item1.type" :name="item1.names">
                </label>
                <div>{{item1.name}}</div>
            </div>
        </div>
        <div class="cbottom">提交</div>
        <div class="dd"></div>
    </div>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        select:false,
        data:{
            list:[
                {
                    num:"1",
                    name:"您的职业是",
                    list1:[
                        {type:"radio", names:"1", name:"上班族",select:false},
                        {type:"radio", names:"1", name:"学生",select:false},
                        {type:"radio", names:"1", name:"教师",select:false},
                        {type:"radio", names:"1", name:"其他",select:false},
                    ]
                },
                {num:"2",
                    name:"您觉得投票时应该注重哪些因素",
                    list1:[
                        {type:"checkbox", names:"2", name:"保密性",select:false},
                        {type:"checkbox", names:"2", name:"时效性",select:false},
                        {type:"checkbox", names:"2", name:"公平性",select:false},
                        {type:"checkbox", names:"2", name:"广泛性",select:false},
                        {type:"checkbox", names:"2", name:"客观性",select:false},
                        {type:"checkbox", names:"2", name:"准确性",select:false},
                    ]
                }
            ]
        },
        methods:{
            selects(index,index1){
                for(var i=0;i<this.list[index].list1.length;i++){
                    if(i==index1){
                        this.list[index].list1[i].select=true;
                    }
                    else{
                        this.list[index].list1[i].select=false;
                    }
                }
            }
        }
    });
</script>
</body>
</html>